<template>
	<div id="books">
		<div id="main-first">
			<el-image :src="pic('')" style="width: 20%;" />
			<div style="width:40%">
				<el-input v-model="data.key" placeholder="请输入内容">
					<template #append>
            <el-button size="large" @click="findByKey"
                       style="background-color: red;color: white;border: 0;display: block;font-size: 16px;font-weight:bolder">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
					</template>
				</el-input>
			</div>
      <div style="width: 20%;">
        <el-button type="primary" size="large" style="background-color: red;border: 0;"
                   @click="myCart"><el-icon ><ShoppingCart /></el-icon>&nbsp;我的购物车</el-button>
      </div>
		</div>
		<br>
		<hr style="border: 1px solid red;">
		<br>
		<div style="display: flex;justify-content: space-around;">
			<div style="width: 25%;">
				<div :class="{ 'emnu': true, 'open': (data.typeid == t.id) }" v-for="t in data.type" :key="t.id"
					@click="findPageByType(t.id)">
					<p class="main-type">{{ t.name }}</p>
					<i class="el-icon-arrow-right" style="color: red;"></i>
				</div>
			</div>
			<div style="width: 70%; min-height: 78vh;">
				<div id="goods" v-for="b in data.books" :key="b.id">
					<div style="height: 10vw;width: 10vw;margin: 10px 0px 10px 0px;">
						<el-image :src="pic(b.pic)" fit="fill" :lazy="true"
							style="width: 80%;height: 80%;object-fit: cover;" />
					</div>
					<div style="width: 70%;">
						<p style="font-weight: 700;font-size: 0.9rem;" v-html="b.name"></p>
						<div style="font-size: 0.9rem;font-weight: 500;margin: 10px 0px;display: flex;">
							<p style="width: 30%;" v-html="b.author"></p>
							<p style="width: 40%;" v-html="b.maker"></p>
						</div>
						<div style="font-size: 0.8rem;font-weight: 300;color: gray;">
							<p style="max-height: 5vw;overflow: hidden;border-left: 2px solid rgb(228, 231, 237);"
								v-html="b.info"></p>
						</div>
					</div>
					<div id="shopping-button">
						<el-button type="primary" size="default" @click="findBook(b.id)">
							<i class="el-icon-discount"></i>
							详情
						</el-button>
						<br>
						<p>￥{{ b.price }}</p>
						<br>
						<el-button type="danger" size="default" @click="goShopping(b.id)">
							<i class="el-icon-shopping-cart-full"></i>
							购买
						</el-button>
					</div>
				</div>
				<br>
				<el-pagination background layout="prev, pager, next" :current-page="store.state.page.show.curPage"
					:page-size="store.state.page.show.lines" :total="store.state.page.show.total" @current-change="get"
					hide-on-single-page style="text-align: center;">
				</el-pagination>
			</div>

		</div>

	</div>
</template>

<script setup>
	import pic from '@/api/pic';
	import api from '@/api';
	import {
		ElMessage
	} from 'element-plus';
	import router from '../../router';
	import store from '../../store';
	import {
		onMounted,
		reactive
	} from 'vue';
	import {
		useRoute
	} from 'vue-router';

	const data = reactive({
		books: [],
		type: [],
		typeid: 0,
		key: ''
	})

	const findByKey = () => {
		//初始化数据
		store.state.page.show.curPage = 1;
		store.state.page.show.lines = 6;
		store.state.key = data.key
		let js = {
			curPage: `${store.state.page.show.curPage}`,
			lines: `${store.state.page.show.lines}`,
			key: `${store.state.key}`
		}
		//post的提交获取,初始化获取图书信息
		api.postj(`/api/public/book/findPageKey/`, js).then((resp) => {
			store.state.page.show.total = resp.data.data.count
			data.books = resp.data.data.books
      data.typeid = data.books[0].type.id
		})
	}
	const findPageByType = (id) => {
		store.state.typeid = id
		data.typeid = id
		//初始化数据
		store.state.page.show.curPage = 1;
		store.state.page.show.lines = 6;

		api.get(`api/public/book/findPage/${store.state.page.show.curPage}/${store.state.page.show.lines}/${id}`)
			.then((resp) => {
				store.state.page.show.total = resp.data.data.count
				data.books = resp.data.data.books
			})
	}

	const get = (newPage) => {
		store.state.page.show.curPage = newPage;

		if (data.typeid >= 0) {
			//初始化获取图书信息
			api.get(
					`/api/public/book/findPage/${store.state.page.show.curPage}/${store.state.page.show.lines}/${data.typeid}`
				)
				.then((resp) => {
					store.state.page.show.total = resp.data.data.count
					data.books = resp.data.data.books

				})
			return
		}

		let js = {
			curPage: `${store.state.page.show.curPage}`,
			lines: `${store.state.page.show.lines}`,
			key: `${store.state.key}`
		}

		//post的提交获取,初始化获取图书信息
		api.postj(`/api/public/book/findPageKey/`, js).then((resp) => {
			store.state.page.show.total = resp.data.data.count
			data.books = resp.data.data.books
		})
	}
	// 跳转我的购物车
  const myCart = () => {
    router.push('/info/shoppingcart')
  }
	// 查询单个书籍的详情信息
	const findBook = (bookid) => {
		router.push(`/info/book?id=${bookid}`)
	}
	// 添加商品到购物车
	const goShopping = (id) => {
		if (id == undefined) {
			ElMessage.warning('无用户信息')
		}

		api.get(`/api/cart/add/${id}`).then((resp) => {
			let msg = resp.data.msg;
			ElMessage.success(msg)
		})
	}
	onMounted(() => {
		//初始化数据
		if (store.state.page.show.curPage == 0 && store.state.page.show.lines == 0) {
			store.state.page.show.curPage = 1;
			store.state.page.show.lines = 6
		}

		// 初始化类型
		api.get("api/public/getType").then((resp) => {
			// 二级类型
			const type = resp.data.data.types
			// 一级类型
			const category = resp.data.data.category

			console.log("type", type)
			console.log("category", category)

			let c = {
				id: 0,
				name: "全部类型-默认"
			}
			data.type.push(c)

			for (let i = 0; i < category.length; i++) {
				let c = {
					id: category[i].id,
					name: category[i].name
				}
				data.type.push(c)
				for (let j = 0; j < type.length; j++) {
					if (category[i].id == type[j][0]) {
						for (let t = 1; t < type[j].length; t++) {
							let ty = {
								id: type[j][t].id,
								name: category[i].name + ` / ` + type[j][t].name
							}
							data.type.push(ty)
						}
					}
				}
			}

			console.dir(data.type)
		})

		if (store.state.key !== undefined && store.state.key !== '') {
			let js = {
				curPage: `${store.state.page.show.curPage}`,
				lines: `${store.state.page.show.lines}`,
				key: `${store.state.key}`
			}

			//post的提交获取,初始化获取图书信息
			api.postj(`/api/public/book/findPageKey/`, js).then((resp) => {
				store.state.page.show.total = resp.data.data.count
				data.books = resp.data.data.books
        data.typeid = data.books[0].type.id
			})
			return
		}

		// 从路由参数中获取 id 值
		data.typeid = store.state.typeid;

		//初始化获取图书信息
		api.get(
				`/api/public/book/findPage/${store.state.page.show.curPage}/${store.state.page.show.lines}/${data.typeid}`
			)
			.then((resp) => {
				store.state.page.show.total = resp.data.data.count
				data.books = resp.data.data.books
			})

	})
</script>

<style lang="less">
	#books {

		// 设置内边距全局布局
		padding-left: 12%;
		padding-right: 12%;

		#main-first {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;


		}

		.emnu {
			height: 30px;
			line-height: 30px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.emnu.open {
			background-color: aliceblue;
		}

		.emnu:hover {
			background-color: aliceblue;
			color: red;
			border: 1px solid red;
		}

		.main-type {
			width: 80%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		#goods {
			width: 100%;
			height: 170px;
			display: flex;
			margin: 10px 0px;
		}

		#goods:hover {
			background-color: aliceblue;

		}

		#shopping-button {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-end;

			.el-button {
				padding: 5px 15px;
			}
		}
	}
</style>